<template>
  <div class="map" ref="map"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
// @ts-ignore
// import gd from "@/assets/map/gd.json";
import cn from "@/assets/map/china2.json";
const map = ref<HTMLDivElement>();
let myChart: echarts.ECharts;

const props = defineProps(["data"]);

// 注册地图
echarts.registerMap("cn", cn as any);

var option: echarts.EChartsOption = {
  title: {
    text: "Population Density of Hong Kong （2011）",
    subtext: "Data from Wikipedia",
    sublink:
      "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c} (p / km2)",
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
  visualMap: {
    min: 0,
    max: 1000000,
    text: ["High", "Low"],
    realtime: false,
    calculable: true,
    inRange: {
      color: ["lightskyblue", "yellow", "orangered", "#0094ff", "#0a0"],
    },
  },
  series: [
    {
      name: "香港18区人口密度",
      type: "map",
      map: "cn",
      label: {
        show: true,
      },
      data: [],
    },
  ],
};

onMounted(() => {
  myChart = echarts.init(map.value);
  // myChart.setOption(option);
});

watch(
  () => props.data.length,
  () => {
    // @ts-ignore
    option.series[0].data = props.data.map((item) => ({
      name: item.areaName,
      value: item.saleNum,
    }));
    myChart.setOption(option);
  }
);
</script>

<style scoped>
.map {
  height: 600px;
}
</style>
